import React from 'react';
import { Layout, Menu } from "antd";
import { userMenu, userRoutes } from '../../router/UserRouter'
import {Switch,Redirect} from 'react-router-dom'
const { Sider, Content, Footer } = Layout;
export default function UserPage() {
    const [collapsed, setCollapsed] = React.useState(false);
    function onCollapse() {
        if (collapsed === false) {
            setCollapsed(true);
        } else {
            setCollapsed(false);
        }
    }

    return (
        <Layout className="layoutStyle">
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <Menu style={{height:900}} theme="dark" defaultSelectedKeys={['1']} mode="inline" >
                    {userMenu()}
                </Menu>
            </Sider>

            <Layout className="layoutStyle">
                <Content className="contentStyle">
                    <Switch>
                        {userRoutes()}
                        <Redirect to="/UserPage/Home" />
                    </Switch>

                </Content>
                {/*<Footer className="bottomStyle">cet4-6rs-hooks ©2021 Created by Kings</Footer>*/}
            </Layout>
        </Layout>


    )
}


export { UserPage }